﻿<template>
    <div class="detail-con user-list ft14">
        <div class="detail-item">
            <span class="item-tit" style="margin-top:22px;">头像</span>
            <ul class="clearfix list-unstyled pic-list">
                <li>
                    <img :src="'/upload/tx/1_'+UserData.UserName+'.jpg'" onerror="javascript: this.src = '/ViewV5/images/head.jpg'" style="width:55px;height:55px;border-radius:3px;">
                </li>
                <li>
                    <el-upload class="avatar-uploader"
                               action="/API/VIEWAPI.ashx?Action=UPFILE"
                               :show-file-list="false"
                               :on-success="handleAvatarSuccess"
                               :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <a class=" cor-blue" @click="UploadHeadImage()" style="line-height: 55px;">修改</a>
                </li>
            </ul>
        </div>
        <div class="detail-item">
            <span class="item-tit">账号</span>
            <div class="item-con"> {{UserData.UserName}} </div>

        </div>
        <div class="detail-item">
            <span class="item-tit">公司</span>
            <div class="item-con"> {{DeptName}} </div>

        </div>
        <div class="detail-item">
            <span class="item-tit">部门</span>
            <div class="item-con"> {{DeptName}} </div>
        </div>

        <div class="detail-item">
            <span class="item-tit">职位</span>
            <input type="text" class="settings-input form-control" disabled="disabled" v-model="UserData.zhiwu">
        </div>
        <div class="detail-item">
            <span class="item-tit">密码</span>
            <div class="item-con"><a class=" cor-blue" data-toggle="modal" data-target="#UpdatePDModal" data-index="1" data-backdrop="static">修改密码</a></div>
        </div>
        <div class="detail-item">
            <span class="item-tit">性别</span>
            <div style="height:35px;padding-top:5px;">
                <label class="mr20" @click="ChangeSex('男')">
                    <div class="icheckbox_square-blue mr5"  v-bind:class="{ checked: UserData.Sex=='男' }" >
                        <span class="iconfont icon-check ft12"></span>
                    </div>男
                </label>
                <label @click="ChangeSex('女')">
                    <div class="icheckbox_square-blue mr5" v-bind:class="{ checked: UserData.Sex=='女' }">
                        <span class="iconfont icon-check ft12"></span>
                    </div>女
                </label>
            </div>
        </div>
      
        <div class="detail-item">
            <span class="item-tit">手机号</span>
            <div class="item-con">{{UserData.mobphone}} <a class=" cor-blue hidden">修改</a></div>
        </div>
        <div class="detail-item">
            <span class="item-tit">电话</span>
            <input type="text" class="settings-input form-control" placeholder="输入电话"  v-model="UserData.telphone">
        </div>
       
        <div class="detail-item">
            <span class="item-tit">邮箱</span>
            <input type="text" class="settings-input form-control" placeholder="邮箱账号"  v-model="UserData.mailbox">
        </div>
        <div class="detail-item">
            <span class="item-tit">Q&nbsp;Q</span>
            <input type="text" class="settings-input form-control" placeholder="QQ账号" v-model="UserData.QQ">
        </div>
        <div class="detail-item">
            <span class="item-tit">员工岗位</span>
            <textarea style="width: 100%;height: 94px;border: #ddd solid 1px; border-radius: 2px;padding: 3px 10px;color: #333;vertical-align: top;resize: none;" placeholder="填写员工岗位"  v-model="UserData.UserGW"></textarea>
        </div>
        <div class="detail-item">
            <span class="item-tit"></span>
            <button class="btn btn-info pl20 pr20" @click="SaveData()"><i class="fa fa-spinner fa-spin" style="display: none"></i>保存</button>
        </div>

    </div>
</template>

<script>
    module.exports = {
        name:'xtgl_index',
        props: ['pdata'],
        data: function () {
            return {
                name: "员工编辑",
                iswf: true,//是否属于流程表单
                BranchData: [],
                RoleData: [],
                DeptName: "",
                userName: "",
                seltype: 1,
                UserData: {}
            }
        },
        methods: {
            ChangeSex: function (type) {
                this.UserData.Sex = type;
            },
            InitWigetData: function () {
                var pro = this;
                //人员信息
                $.getJSON('/api/Auth/ExeAction?Action=GETUSERBYUSERNAME', { "P1": ComFunJS.getnowuser() }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        pro.UserData = resultData.Result.User;
                        pro.DeptName = resultData.Result.BranchInfo.DeptName;
                        pro.UserData.UserOrder = !pro.UserData.UserOrder ? 0 : pro.UserData.UserOrder;
                    }
                })
            },
            SaveData: function (dom) {
                var tempindex = this;
                if (!(/^0?1[3|4|5|8|7][0-9]\d{8}$/.test(tempindex.UserData.mobphone))) {
                    top.ComFunJS.winwarning("手机号填写不正确");
                    return;
                }
                $(dom).attr("disabled", true).find(".fa").show();//加上转圈样式
                var modelValue = JSON.stringify(tempindex.UserData);
                $.getJSON("/api/Auth/ExeAction?Action=ADDUSER", { P1: modelValue, P2: "" }, function (result) {
                    $(dom).attr("disabled", false).find(".fa").hide();//加上转圈样式
                    if (result.ErrorMsg == "") {
                        top.ComFunJS.winsuccess("修改用户信息成功");
                    }
                });
            }
        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                pro.InitWigetData();
            })

        }
    };
</script>